<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础知识学习</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #2c3e50;
            text-align: center;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        h2 {
            color: #3498db;
            margin-top: 30px;
        }
        h3 {
            color: #2980b9;
            margin-top: 20px;
        }
        pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            border-left: 4px solid #3498db;
        }
        code {
            font-family: 'Courier New', monospace;
            background-color: #f8f8f8;
            padding: 2px 4px;
            border-radius: 3px;
        }
        .example {
            background-color: #ecf0f1;
            padding: 15px;
            border-radius: 5px;
            margin: 15px 0;
        }
        .note {
            background-color: #fff3cd;
            padding: 10px;
            border-left: 4px solid #ffc107;
            border-radius: 4px;
            margin: 10px 0;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        th, td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
        ul, ol {
            margin-left: 20px;
        }
        .section {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML基础知识学习指南</h1>
        
        <div class="section">
            <h2>什么是HTML？</h2>
            <p>HTML（HyperText Markup Language）是超文本标记语言，用于创建网页的结构。它使用一系列标记（标签）来定义页面上的内容和结构。</p>
            
            <div class="note">
                <strong>注意：</strong>HTML不是编程语言，而是一种标记语言，它定义了网页的结构。
            </div>
        </div>
        
        <div class="section">
            <h2>HTML基本结构</h2>
            <p>一个完整的HTML文档包含以下基本结构：</p>
            
            <pre><code>&lt;!DOCTYPE html&gt;  <!-- 声明文档类型 -->
&lt;html lang="zh-CN"&gt;  <!-- HTML根元素，设置语言为中文 -->
&lt;head&gt;  <!-- 头部信息，包含元数据 -->
    &lt;meta charset="UTF-8"&gt;  <!-- 设置字符编码 -->
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;  <!-- 适配移动设备 -->
    &lt;title&gt;页面标题&lt;/title&gt;  <!-- 网页标题 -->
&lt;/head&gt;
&lt;body&gt;  <!-- 主体内容，用户可见的部分 -->
    <!-- 页面内容 -->
&lt;/body&gt;
&lt;/html&gt;</code></pre>
        </div>
        
        <div class="section">
            <h2>常用HTML标签</h2>
            
            <h3>文本标签</h3>
            <table>
                <tr>
                    <th>标签</th>
                    <th>描述</th>
                    <th>示例</th>
                </tr>
                <tr>
                    <td>&lt;h1&gt; 到 &lt;h6&gt;</td>
                    <td>标题标签，h1最大，h6最小</td>
                    <td>&lt;h1&gt;一级标题&lt;/h1&gt;</td>
                </tr>
                <tr>
                    <td>&lt;p&gt;</td>
                    <td>段落标签</td>
                    <td>&lt;p&gt;这是一个段落。&lt;/p&gt;</td>
                </tr>
                <tr>
                    <td>&lt;br&gt;</td>
                    <td>换行标签</td>
                    <td>第一行&lt;br&gt;第二行</td>
                </tr>
                <tr>
                    <td>&lt;strong&gt;</td>
                    <td>强调文本（粗体）</td>
                    <td>&lt;strong&gt;重要内容&lt;/strong&gt;</td>
                </tr>
                <tr>
                    <td>&lt;em&gt;</td>
                    <td>强调文本（斜体）</td>
                    <td>&lt;em&gt;强调内容&lt;/em&gt;</td>
                </tr>
            </table>
            
            <h3>链接和图像</h3>
            <table>
                <tr>
                    <th>标签</th>
                    <th>描述</th>
                    <th>示例</th>
                </tr>
                <tr>
                    <td>&lt;a&gt;</td>
                    <td>链接标签</td>
                    <td>&lt;a href="https://www.example.com"&gt;访问示例网站&lt;/a&gt;</td>
                </tr>
                <tr>
                    <td>&lt;img&gt;</td>
                    <td>图像标签</td>
                    <td>&lt;img src="image.jpg" alt="描述文本" width="300"&gt;</td>
                </tr>
            </table>
            
            <h3>列表</h3>
            <table>
                <tr>
                    <th>标签</th>
                    <th>描述</th>
                    <th>示例</th>
                </tr>
                <tr>
                    <td>&lt;ul&gt;</td>
                    <td>无序列表</td>
                    <td>&lt;ul&gt;&lt;li&gt;项目1&lt;/li&gt;&lt;li&gt;项目2&lt;/li&gt;&lt;/ul&gt;</td>
                </tr>
                <tr>
                    <td>&lt;ol&gt;</td>
                    <td>有序列表</td>
                    <td>&lt;ol&gt;&lt;li&gt;第一步&lt;/li&gt;&lt;li&gt;第二步&lt;/li&gt;&lt;/ol&gt;</td>
                </tr>
            </table>
        </div>
        
        <div class="section">
            <h2>HTML属性</h2>
            <p>HTML标签可以包含属性，这些属性提供了关于标签的额外信息。属性通常写在开始标签中，以名称/值对的形式出现，如 <code>name="value"</code>。</p>
            
            <div class="example">
                <h4>常见属性示例：</h4>
                <ul>
                    <li><code>id</code> - 为元素提供唯一标识符</li>
                    <li><code>class</code> - 为元素定义一个或多个类名</li>
                    <li><code>src</code> - 指定图像或其他媒体的来源</li>
                    <li><code>href</code> - 指定链接的目标</li>
                    <li><code>alt</code> - 为图像提供替代文本</li>
                    <li><code>style</code> - 为元素定义内联CSS样式</li>
                </ul>
            </div>
        </div>
        
        <div class="section">
            <h2>HTML表单</h2>
            <p>HTML表单用于收集用户输入。表单元素包括文本字段、复选框、单选按钮、提交按钮等。</p>
            
            <pre><code>&lt;form action="/submit" method="post"&gt;
    &lt;label for="username"&gt;用户名：&lt;/label&gt;
    &lt;input type="text" id="username" name="username"&gt;
    
    &lt;label for="email"&gt;邮箱：&lt;/label&gt;
    &lt;input type="email" id="email" name="email"&gt;
    
    &lt;label for="message"&gt;留言：&lt;/label&gt;
    &lt;textarea id="message" name="message"&gt;&lt;/textarea&gt;
    
    &lt;input type="submit" value="提交"&gt;
&lt;/form&gt;</code></pre>
        </div>
        
        <div class="section">
            <h2>HTML5新增元素</h2>
            <p>HTML5引入了许多新元素，使网页结构更加语义化：</p>
            
            <table>
                <tr>
                    <th>元素</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>&lt;header&gt;</td>
                    <td>文档或节的页眉</td>
                </tr>
                <tr>
                    <td>&lt;nav&gt;</td>
                    <td>导航链接的容器</td>
                </tr>
                <tr>
                    <td>&lt;section&gt;</td>
                    <td>文档中的节</td>
                </tr>
                <tr>
                    <td>&lt;article&gt;</td>
                    <td>独立的内容</td>
                </tr>
                <tr>
                    <td>&lt;aside&gt;</td>
                    <td>侧边栏内容</td>
                </tr>
                <tr>
                    <td>&lt;footer&gt;</td>
                    <td>文档或节的页脚</td>
                </tr>
            </table>
        </div>
        
        <div class="section">
            <h2>练习：创建简单网页</h2>
            <p>现在，让我们通过一个简单的练习来巩固所学的HTML知识。尝试创建一个包含以下元素的网页：</p>
            <ol>
                <li>基本的HTML结构</li>
                <li>一个标题和几个段落</li>
                <li>一张图片</li>
                <li>一个链接</li>
                <li>一个列表</li>
            </ol>
            
            <div class="example">
                <h4>参考代码：</h4>
                <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;我的第一个网页&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;欢迎来到我的网页&lt;/h1&gt;
    
    &lt;p&gt;这是我用HTML创建的第一个网页。&lt;/p&gt;
    &lt;p&gt;我正在学习HTML基础知识，包括标签、属性和结构。&lt;/p&gt;
    
    &lt;img src="https://picsum.photos/400/300" alt="示例图片"&gt;
    
    &lt;p&gt;学习资源：&lt;a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML"&gt;MDN HTML文档&lt;/a&gt;&lt;/p&gt;
    
    &lt;h2&gt;我的学习计划&lt;/h2&gt;
    &lt;ul&gt;
        &lt;li&gt;掌握HTML基础标签&lt;/li&gt;
        &lt;li&gt;学习CSS样式&lt;/li&gt;
        &lt;li&gt;了解JavaScript交互&lt;/li&gt;
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
            </div>
        </div>
        
        <div class="section">
            <h2>下一步学习</h2>
            <p>学习完HTML基础后，你可以继续学习：</p>
            <ol>
                <li>CSS - 用于美化网页</li>
                <li>JavaScript - 用于为网页添加交互功能</li>
                <li>响应式设计 - 使网页在不同设备上都能良好显示</li>
            </ol>
            
            <div class="note">
                <strong>提示：</strong>实践是学习HTML的最佳方式！多尝试创建不同的网页结构，熟悉各种标签的用法。
            </div>
        </div>
    </div>
</body>
</html>
